﻿<HTML><HEAD><TITLE>Google Maps JavaScript API v3 Example: Overlay Simple</TITLE>
<META content="initial-scale=1.0, user-scalable=no" name=viewport>
<META http-equiv=content-type content="text/html; charset=UTF-8"><LINK href="/maps/documentation/javascript/examples/default.css" type=text/css rel=stylesheet>
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false"></script>
<SCRIPT type=text/javascript>
  function initialize() {
      var myLatLng = new google.maps.LatLng(39.927, 116.387);
      var myOptions = {
          zoom: 11,
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.SATELLITE
      };

      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      //自定义叠加层
      function NameOverlay(point, name, map) {
          this.point_ = point;
          this.name_ = name;
          this.map_ = map;
          this.div = null;
          this.setMap(map);

      }

      NameOverlay.prototype = new google.maps.OverlayView();

      NameOverlay.prototype.onAdd = function() {

          // 创建一个div，其中包含了当前文字
          var div = document.createElement("div");
          var span = document.createElement("span");
          var text = document.createTextNode(this.name_);
          span.appendChild(text);
          div.appendChild(span);
          div.style.borderStyle = "none";
          div.style.borderWidth = "0px";
          div.style.position = "absolute";
          this.div = div;
          var me = this;
          var panes = this.getPanes();
          panes.overlayImage.appendChild(div);
      }

      NameOverlay.prototype.draw = function() {

          //var overlayProjection = this.getProjection();
          //var center = overlayProjection.fromLatLngToDivPixel(this.point_);
          var overlayProjection = this.getProjection();
          var center = overlayProjection.fromLatLngToDivPixel(this.point_);
          var div = this.div;
          div.style.left = center.x + "px";
          div.style.top = center.y + "px";
          div.style.width = "100px";
          div.style.height = "8px";
      }

      NameOverlay.prototype.onRemove = function() {
          this.div.parentNode.removeChild(this.div);
          this.div = null;
      }
      var marker1LatLng = new google.maps.LatLng(39.927, 116.387);
      var marker1 = new google.maps.Marke({ position: marker1LatLng, map: map, draggable: true, flat: true });

      //传入要绑定的marker
      var name1View = new NameOverlay(marker1LatLng, "文字", map);

  }


</SCRIPT>
</HEAD>
<BODY onload=initialize()>
<DIV id=map_canvas></DIV>
</BODY></HTML>